<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板</title>
   
</head>
  <!--引入开发版本Vue-->
  <script type="text/javascript" src="../js/vue.js"></script>
<body>

    <!-- 
         面试题: react,vue中的key有什么作用? (key的内部原理)
           
            1. 虚拟DOM中的key的作用:
                        key是虚拟DOM对象的标识, 当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,
                        随后Vue进行[新虚拟DOM] 与 [旧虚拟DOM]的差异比较,比较规则如下:

            2. 对比规则
                    (1). 旧虚拟DOM中未找到与新虚拟DOM相同的key:
                         1.若虚拟DOM中内容没变,直接使用之前的真实DOM!
                         2.若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真是DOM.
                     
                     (2). 旧虚拟DOM中未找到与新虚拟DOM相同的key
                              创建新的真实DOM,随后渲染到到页面.

            3. 用index作为key可能会引发的问题:
                          1. 若对数据进行: 逆序添加,逆序删除等破坏顺序操作:
                                  会产生没有必要的真是DOM更新 ==> 界面效果没问题,但效率低.
                          
                          2. 如果结构中还包含输入类的DOM:
                                   会产生错误DOM更新 ==> 界面有问题.

            4. 开发中如何选择key                                
                    1. 最好使用每条数据的唯一标识作为key,比如 id,手机号,身份证号,学号等唯一值.
                    2. 如果不存在对数据的逆序添加,逆序删除等破坏顺序操作,仅用于渲染列表用于展示.
                        使用index作为key是没有问题的.

             其它解释:
                v-for中的key是为了循环数据的时候减少资源浪费，
                        渲染数据里时候会比对新旧虚拟dom，能复用的就复用，
                        就是用这个key去查找dom，然后比对，用的是diff算法
     -->
    
    <!-- 准备好一个容器 -->
    <div id="root">

        <!-- 遍历数组 -->
        <h2>人员列表 (遍历数组)</h2>
       
        <button @click.once="add">添加一个老刘</button>
       <ul>
          <li v-for="(p,index) of persons" :key="index">
           {{p.name}} - {{p.age}}
           <input type="text">
         </li>
       </ul>
       
      
       
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

    new Vue({
        el:document.getElementById('root'),
        data:{
            persons:[
                {id:'001', name:'张三',age:18},
                {id:'002', name:'李四',age:28},
                {id:'003', name:'王五',age:38},
            ]
        },
        methods:{
           add(){
            const p = {id:'004',name:'老刘',age:40}
            this.persons.unshift(p)
           }
        }
    });
</script>

</html>